<!--
* @author wn
* @date 2022/06/24 10:09:07
* @description: 停车收费页面
!-->
<template>
	<div class="parking-pay">
		<transition name="fade">
			<div class="pay-info" v-if="carId">
				<!-- 车牌信息 -->
				<section class="license-plate-frame">
					<div class="license-plate">{{ carId }}</div>
				</section>
				<div class="split"></div>
				<p>
					<span>停车场名称:</span><span>{{ parkName }}</span>
				</p>
				<p>
					<span>停车费用:</span><span class="price">{{ money }}元</span>
				</p>
				<div class="split"></div>
				<!-- :disabled="btnDisabled" -->
				<button class="payBtn" @click="doPay">
					微信立即缴费({{ money }}元)
				</button>
			</div>
			<!-- 骨架屏 -->
			<div v-else class="skeleton">
				<parking-skeleton bg="#e4e4e4" width="150px" height="60px" animated />
				<parking-skeleton bg="#e4e4e4" width="100%" height="20px" animated />
				<parking-skeleton bg="#e4e4e4" width="100%" height="20px" animated />
				<parking-skeleton bg="#e4e4e4" width="100%" height="30px" animated />
			</div>
		</transition>
		<div class="pay-warn">
			<p>临停支付说明</p>
			<p>1.支付后请在<span>5分钟内</span>离场</p>
			<p>2.缴费前请仔细核对停车场、支付金额</p>
		</div>
	</div>
	<!-- 测试数据 -->
</template>
<script>
import { findParkingInfo } from '@/network/parking'
import { reactive, toRefs } from 'vue'
import router from '@/router'
export default {
	name: 'ParkingPay',
	setup() {
		// 定义付款按钮 是否可以点击
		// const btnDisabled = ref(false)
		// 1.在订单组件中选择支付方式之后在支付页面先去判断是否是在微信内：
		const isIn = isInWeiXin()
		// 定义 收费展示数据
		const showInfo = reactive({
			carId: '',
			money: '',
			parkName: '',
		})
		// 定义 调用 微信支付 的参数
		let payInfo = null
		// 拆分 url set方式
		// const url = 'http://parktest.puyizu.com/outpage?outno=6&parkid=1&code=123456'
		const data = initUrl()
		// 请求后台接口  获取  收费展示数据
		JSON.stringify(data) !== '{}' &&
			findParkingInfo(data).then(({ data }) => {
				if (!data) {
					alert('数据错误，请联系管理员')
					return
				}
				// 车牌 第二个 字符 插入 圆圈··· •
				showInfo.carId = data.carid.replace(/^(.{2})/, '$1 · ')
				showInfo.money = data.money
				showInfo.parkName = data.parkname
				// 赋值  微信支付 数据
				payInfo = data.paystream
			})
		// 重定向 后 获取  code
		// if (data.code === null || data.code === '') {
		// 	redirectPage(payInfo.appId)
		// }
		// 发起微信支付
		const doPay = () => {
			// btnDisabled.value = true
			isIn ? inWeiXin(payInfo) : outWeiXin()
		}
		return { ...toRefs(showInfo), doPay }
	},
}
// 分带参数的URL，将参数分离成对象  undefined == true  === false
const initUrl = url => {
	console.log(url)
	url = url == null ? window.location.href : url
	const search = url.substring(url.lastIndexOf('?') + 1)
	const obj = {}
	const reg = /([^?&=]+)=([^?&=]*)/g
	search.replace(reg, (rs, $1, $2) => {
		const name = decodeURIComponent($1)
		let value = decodeURIComponent($2)
		value = String(value)
		obj[name] = value
		return rs
	})
	return obj
}
// true 是微信内部
const isInWeiXin = () => {
	const ua = window.navigator.userAgent.toLowerCase()
	return ua.match(/MicroMessenger/i) == 'micromessenger'
}
// 微信外支付
const outWeiXin = async () => {
	// 项目支付相关的参数
	// requestPay 后台接口 返回 跳转 URL
	// const { params } = await requestPay()
	const params = ''
	// 返回成功  跳转
	if (params) {
		window.location.replace(params)
	} else {
		// '提交订单失败'
	}
}
// 重定向获取用户code   进来后 获取 url中code 没有的话需要 重定向  然后再次获取 code
// const redirectPage = id => {
// 	// 微信内部则重定向页面
// 	const local = window.location.href // 当前地址
// 	const appId = id // 填写公众号APPID
// 	// 跳转授权链接
// 	window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${encodeURIComponent(
// 		local
// 	)}&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect`
// }
// 微信内支付
// 搭桥前先解决微信内置对象报错
const inWeiXin = params => {
	if (typeof WeixinJSBridge === 'undefined') {
		if (document.addEventListener) {
			document.addEventListener(
				'WeixinJSBridgeReady',
				onBridgeReady(params),
				false
			)
		} else if (document.attachEvent) {
			document.attachEvent('WeixinJSBridgeReady', onBridgeReady(params))
			document.attachEvent('onWeixinJSBridgeReady', onBridgeReady(params))
		}
	} else {
		onBridgeReady(params)
	}
}
// 搭桥onBridgeReady()
const onBridgeReady = weChatParameter => {
	// const timestamp = Math.round(weChatParameter.timeStamp).toString()
	window.WeixinJSBridge.invoke(
		'getBrandWCPayRequest',
		{
			debug: false,
			/*
			appId: weChatParameter.appId, // 公众号名称，由商户传入
			timeStamp: timestamp, // 时间戳，自1970年以来的秒数
			nonceStr: weChatParameter.nonceStr, // 随机串
			package: weChatParameter.package,
			signType: weChatParameter.signType, // 微信签名方式：
			paySign: weChatParameter.paySign, // 微信签名
			*/
			...weChatParameter,
			jsApiList: ['chooseWXPay'],
		},
		function (res) {
			// 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
			if (res.err_msg === 'get_brand_wcpay_request:ok') {
				// 支付成功后的操作
				// alert('支付成功')
				router.replace({
					path: '/success',
					query: { message: '支付成功,一路顺风' },
				})
			} else if (res.err_msg === 'get_brand_wcpay_request:cancel') {
				// 取消支付的操作
				// 取消支付
				router.replace({
					path: '/success',
					query: { message: '支付取消,请重新支付' },
				})
			} else {
				// 支付失败
				router.replace({
					path: '/success',
					query: { message: '支付失败,请重新支付' },
				})
			}
		}
	)
}
</script>
<style scoped lang="less">
.parking-pay {
	padding: 12px;
	.pay-info {
		margin-bottom: 20px;
		background-color: #fff;
		border-radius: 5px;
		padding: 20px;

		.license-plate-frame {
			width: 150px;
			height: 60px;
			margin: 0 auto 20px;
			padding: 6px;
			background-color: rgb(7, 193, 96);
			box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
			.license-plate {
				width: 100%;
				height: 100%;
				line-height: 46px;
				text-align: center;
				font-size: 20px;
				font-weight: 700;
				border: 1px solid #fff;
			}
		}
		.split {
			width: 100%;
			height: 1px;
			background-color: #f5f5f5;
			margin-bottom: 10px;
			~ .split {
				margin-bottom: 0;
				margin-top: 10px;
			}
		}
		p {
			display: flex;
			justify-content: space-between;
			line-height: 40px;
			& span:nth-child(even) {
				font-weight: 700;
			}
			.price {
				color: rgb(7, 193, 96);
			}
		}
		.payBtn {
			appearance: none;
			border: none;
			outline: none;
			border: 1px solid transparent;
			width: 100%;
			height: 50px;
			border-radius: 5px;
			cursor: pointer;
			background: rgb(7, 193, 96);
			box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
			margin: 40px 0 30px;
		}
	}
	.pay-warn {
		background-color: #fff;
		border-radius: 6px;
		padding: 20px;
		p {
			line-height: 40px;
			font-weight: 700;
			~ p {
				font-weight: 500;
			}
			> span {
				color: rgb(227, 8, 66);
			}
		}
	}
	.skeleton {
		border-radius: 5px;
		background-color: #fff;
		margin-bottom: 20px;
		padding: 20px;
		& :nth-child(1) {
			display: block;
			margin: 0 auto 20px;
		}
		& :nth-child(2) {
			margin-bottom: 20px;
		}
		& :nth-child(3) {
			margin-bottom: 10px;
		}
		& :nth-child(4) {
			margin: 30px 0 30px;
			border-radius: 5px;
		}
	}
}
</style>
